<template>
    <div class="app-container">
         <div class="row" id="show-res" v-loading.body="listLoading">
                <div class="col-lg-3" >
                    <div class="panel">
                        <div class="panel-body">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-8">资源结构树</div>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div class="portlet-body">
                                    <div style="margin-bottom:15px;">
                                        <el-input
                                            placeholder="输入关键字进行过滤"
                                            v-model="filterText">
                                        </el-input>
                                    </div>
                                    <el-tree class="filter-tree"
                                        :data="resList"
                                        :props="defaultProps"
                                        default-expand-all
                                        :highlight-current="highlight"
                                        :filter-node-method="filterNode"
                                        @node-click="nodeClick"
                                        ref="treeRes">
                                    </el-tree>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-4">资源详情</div>
                                    <div class="col-md-8" style="text-align: right">
                                        <a class="btn btn-info  btn-sm" :class="{ 'btn-danger' :activeType == '0' }" @click="active('addResource',0)">
                                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                            新增顶级资源
                                        </a>
                                        <a class="btn btn-info  btn-sm" v-show="isCheckItem" :class="{ 'btn-danger'  : activeType == '1' }"  @click="active('addResource',1)">
                                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                            新增子资源
                                        </a>
                                        <a class="btn btn-info  btn-sm" v-show="isCheckItem" :class="{ 'btn-danger' : activeType == '2' }" @click="active('updateResource')">
                                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                            编辑资源
                                        </a>
                                        <a class="btn btn-info  btn-sm" v-show="isCheckItem" :class="{ 'btn-danger' : activeType == '3' }" @click="deleteItem()">
                                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                            删除资源
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top:15px;">
                                <el-form class="small-space" :model="formParam" :rules="rules" ref="formParam" label-width="120px">
                                    <el-form-item label="名称" prop="name">
                                        <el-input v-model="formParam.name" :disabled="isDisabled"></el-input>
                                    </el-form-item>
                                    <el-form-item label="编码" prop="code">
                                        <el-input v-model="formParam.code" :disabled="isDisabled"></el-input>
                                    </el-form-item>
                                    <el-form-item label="图标" prop="icon" >
                                        <el-col :span="20">
                                             <el-input v-model="formParam.icon" :disabled="isDisabled"></el-input>
                                        </el-col>
                                        <el-col :span="1">&nbsp;</el-col>
                                        <el-col :span="2">
                                            <el-button type="success" @click="dialogIconVisible = true" :disabled="isDisabled">选择图标</el-button>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="类型" prop="ismenu">
                                       <el-select v-model="formParam.ismenu" placeholder="请选择资源类型" :disabled="isDisabled" style="width:100%">
                                            <el-option label="MENU" value="1"></el-option>
                                            <el-option label="BUTTON" value="0"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="URL" prop="url">
                                        <el-input v-model="formParam.url" :disabled="isDisabled"></el-input>
                                    </el-form-item>
                                    <el-form-item label="排序" prop="num">
                                        <el-input v-model="formParam.num" :disabled="isDisabled"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="status">
                                        <el-select v-model="formParam.status" placeholder="请选择类型" style="width:100%" :disabled="isDisabled">
                                            <el-option label="启用" value="1"></el-option>
                                            <el-option label="关闭" value="0"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="save('formParam')" :loading="dialogFormVisible" :disabled="isDisabled">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog title="选择图标" :visible.sync="dialogIconVisible">
                <!-- <wscnIconList ref="wscnIconList"></wscnIconList>-->
                <iconList ref="iconList" v-on:actIcon="actIcon"></iconList>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogIconVisible = false">取 消</el-button>
                    <el-button type="primary" @click="selectIcon">确 定</el-button>
                </div> 
                
            </el-dialog>
            
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
   
</style>

<script>
    // import wscnIconList from 'components/Icon-svg/wscn-icon-list';
    import  tree  from 'mock/tree';
    import iconList from '@/components/iconList/';

    export default {
        name: 'resourceList',
        components: {
            iconList: iconList
            // wscnIconList
        },
        data: function () {
            return {
                isCheckItem: false,
                formParam:{
                    parentId: -1,
                    code: '',
                    name: '', //资源名称
                    icon: '', //菜单图标
                    ismenu: '', //菜单类型
                    url: '', //菜单URL
                    status: '1',
                    num: '' //菜单排序
                },
                rules:{
                    name:[
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    code:[
                        {required: true, message: '请输入编码', trigger: 'blur'}
                    ],
                    ismenu:[
                        {required: true, message: '请选择类型', trigger: 'change'}
                    ],
                    url:[
                        {required: true, message: '请输入访问地址', trigger: 'blur'}
                    ],
                    num:[
                        {required: true, message: '请输入排序', trigger: 'blur'}
                    ]
                },
                pcode: null,
                parentId: null,
                filterText: '',
                highlight: true,
                listLoading: false,
                dialogFormVisible: false,
                resList: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                isDisabled: true,
                dotype: null,
                dialogIconVisible: false,
                nodeItem: null,
                activeType: '-1' // 0:增加父资源 1:增加子资源 2:编辑资源 3:删除资源
            }
        },
        watch: {
            filterText(val) {
                this.$refs.treeRes.filter(val);
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                // this.resList = tree.data
                console.log(this.$store.state)
                this.getAllResources();
            });
        },
        methods: {
            getAllResources(){
                let parm = {isAll:1};
                this.Api.menu.getAllResources(parm).then((data)=>{
                    if(data.returnCode == this.Api.resultCode.SUSS){
                        this.resList = data.data
                        this.resetParam();
                    }
                });
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            nodeClick(data,node,group){
                let _this = this;
                this.nodeItem = data;
                this.isDisabled = true;
                this.parentId = null;
                this.activeType = '-1';
                let parm = {menuId: parseInt(data.id)}
                // console.log(parm)
                _this.Api.menu.getResItemInfo(parm).then((data)=>{
                    if(data.returnCode == _this.Api.resultCode.SUSS){
                        let _formParam = {
                            parentId: data.data['parentId'],
                            id: data.data['id'],
                            code: data.data['code'],
                            pcode: data.data['pcode'],
                            name: data.data['name'],
                            icon: data.data['icon'],
                            ismenu: data.data['ismenu'] + '',
                            url: data.data['url'],
                            status: data.data['status']+'',
                            num: data.data['num'] + ''
                       }
                       this.pcode = data.data['code']
                       this.parentId = data.data['id']
                       this.isCheckItem = true
                       this.formParam = _formParam
                    }
                });
            },
            resetParam(){
                this.isCheckItem = false
                this.formParam = {
                    parentId:null, //父菜单ID，-1表示当前是顶级菜单
                    id: null,
                    code: null,
                    pcode: null,
                    name:'', //资源名称
                    icon:'', //菜单图标
                    ismenu: null, //菜单类型 1：菜单 2：api
                    url:'', //菜单URL
                    num:'', //菜单排序
                    levels: 0
                }
            },
            /**
             * @dotype : 行为类型 add 为新增， update 为 修改
             * @type： 节点类型 0 为添加父节点，1为添加子节点
             */
            active(dotype, type){
                if(typeof dotype == 'undefined' || dotype == '') return;
                this.dotype = dotype;
                if(dotype == 'addResource' && type == 1){
                    this.resetParam();
                }
                if(dotype == 'addResource' && type == 0){
                    this.parentId = null;
                    this.pcode = null
                    this.isCheckItem = false
                    this.resetParam();
                }
                this.activeType = type+'';
                if(dotype == 'updateResource'){
                    if(!this.formParam['id']){
                        this.$message({
                            message: '请选择要编辑的节点',
                            type: 'warning'
                        });
                        return;
                    }
                    this.activeType = '2';
                }
                this.isDisabled = false;
            },
            save(formName){
                let _this = this;
                this.$refs[formName].validate(function(valid){
                    if (valid) {
                        let parm = null;
                        console.log(_this.pcode, '_this.pcode')
                        if(_this.dotype == 'addResource'){
                            parm = {
                                ismenu: parseInt(_this.formParam.ismenu),
                                num: parseInt(_this.formParam.num),
                                status: parseInt(_this.formParam.status) || 1,
                                name: _this.formParam.name,
                                icon: _this.formParam.icon,
                                code: _this.formParam.code,
                                url: _this.formParam.url
                            }
                            if(_this.parentId){
                                parm.parentId = parseInt(_this.parentId)
                            } 
                            if(_this.pcode){
                                parm.pcode = _this.pcode
                            } 
                            // console.log(parm,'parm')
                        }
                        if(_this.dotype == 'updateResource'){
                            parm = {
                                id: _this.formParam.id,
                                ismenu: parseInt(_this.formParam.ismenu),
                                num: parseInt(_this.formParam.num),
                                status: parseInt(_this.formParam.status),
                                name: _this.formParam.name,
                                icon: _this.formParam.icon,
                                url: _this.formParam.url
                            }
                        }
                        _this.dialogFormVisible = true;

                        console.log(parm, 'parm')
                        _this.Api.menu[_this.dotype](parm).then((data)=>{
                            if(data.returnCode == _this.Api.resultCode.SUSS){
                                _this.dialogFormVisible = false;
                                _this.$notify({
                                        title: '成功',
                                        message: data.msg,
                                        type: 'success',
                                        duration: 2000
                                });
                                _this.getAllResources();
                            }
                        });
                    }
                });
            },
            deleteItem() {
                let _this = this;
                if(!_this.formParam['id']) {
                    this.$message({
                        message: '请选择要删除的节点',
                        type: 'warning'
                    });
                    return ;
                }
                if(this.nodeItem['children'] && this.nodeItem['children'].length > 0){
                    this.$message({
                        message: '请先删除子节点',
                        type: 'warning'
                    });
                    return ;
                }
                this.activeType = '3';
                this.$confirm('确认删除 节点：'+_this.formParam.name+'？', '确定删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(_this.formParam.id)
                    let parm = {menuId: parseInt(_this.formParam.id)}
                    _this.Api.menu.deleteResItem(parm).then((data)=>{
                        if(data.returnCode == _this.Api.resultCode.SUSS){
                            _this.$notify({
                                title: '删除资源成功',
                                message: data.msg,
                                type: 'success',
                                duration: 2000
                            });
                            _this.getAllResources();
                        }
                    });
                }).catch(() => {

                });
            },
            selectIcon(){
               const wscnIconList = this.$refs.iconList;
               let icon =  wscnIconList.getIcon();
               this.formParam['icon'] = icon;
                this.dialogIconVisible = false;
            },
            actIcon(icon) {
                this.param.icon = icon;
            }
        }
    }
</script>